<template><!-- 每日新增 -->
    <div class="quan">
       <div class="ju">
           <span>居家检测/每日新增</span>
       </div>
       <div class="hh">
           <div class="hh1">
               <el-table :data="tableData" border style="width: 100%" >
                <el-table-column type="index" label="序号" width="100px" align="center" />
                <el-table-column prop="name" label="姓名"  width="100px" align="center" />
                <el-table-column prop="sex" label="性别"  width="100px" align="center"/>
                <el-table-column prop="idCard" label="身份证号" width="150px"  align="center"/>
                <el-table-column prop="phoneNum" label="联系电话"  width="100px" align="center"/>
                <el-table-column prop="residenceAddress" label="籍贯地"   width="200px" align="center"/>
                <el-table-column prop="nowAddress" label="现居地"  width="200px" align="center"/>
                <el-table-column prop="jointType" label="密接类型"   width="100px" align="center"/>
                <el-table-column prop="source" label="来源"  width="150px" align="center"/>
                <el-table-column prop="registrant" label="登记人"  width="100px" align="center"/>
                <el-table-column prop="registrationDate" label="登记日期"  width="100px" align="center"/>
                <el-table-column prop="removeDate" label="登解除隔离日期"  width="150px" align="center"/>
                <el-table-column prop="status" label="状态" width="100px" align="center"/>
                <el-table-column fixed="right" label="操作" width="264px" align="center" #default="scope">
                    <!-- 判断条件为是否密接 -->
                    <template v-if="scope.row.jointType=='次密接'||scope.row.jointType=='密接'" >
                        <router-link :to="{name:'cha', query: {id:scope.row.id,jie:scope.row.status}}" ><el-button link type="primary" size="small" >查看详情</el-button></router-link>
                        <router-link :to="{name:'miqie', query: {id:scope.row.id}}"><el-button link type="primary" size="small">密切跟踪</el-button></router-link>
                        <el-button link type="primary" size="small" @click="show(scope.row)">解除监测</el-button>
                        
                    </template>
                    <template v-if="scope.row.jointType=='一般'" >
                        <router-link :to="{name:'bianju', query: {id:scope.row.id}}"><el-button link type="primary" size="small" >编辑</el-button></router-link>
                        
                        <el-button link type="primary" size="small" @click="san(scope.row.id)">删除</el-button><br>
                        <router-link :to="{name:'cha', query: {id:scope.row.id,jie:scope.row.status}}" ><el-button link type="primary" size="small" >查看详情</el-button></router-link>
                        <router-link :to="{name:'miqie', query: {id:scope.row.id}}"><el-button link type="primary" size="small">密切跟踪</el-button></router-link>
                        <el-button link type="primary" size="small" @click="show(scope.row)">解除监测</el-button>
                    </template>
                    <teleport to="body" >
                    <!-- to后面的地址还可以是 html  或者其他 div等 -->
                    <!-- 表示将teleport包裹的这个div,移动到html这个结构中 -->
                    <div class="mask" v-if="isShow.showDialog">
                        <div class="dialog1">
                            <h2>是否确认解除</h2>
                        
                            
                            <el-button class="dialog-btn" @click="hidden" type="primary" round>返回</el-button>
                            <el-button class="dialog-btn" @click="hidden2(scope.row)" type="primary" round>确认</el-button>
                        </div>
                    </div>
                </teleport>
                </el-table-column>
                    
                </el-table>
           </div>
           
           
       </div>
       
   
    </div>
    <teleport to="body" >
        <div class="que" v-show="que">
            <h1>确定删除？</h1>
            <div>
            <button @click="fan">返回</button>
            <button  @click="que1">确定</button>
             </div>
            
    </div>
    </teleport>
    
   </template>
   
   <script lang="ts">
   import { defineComponent,onMounted,reactive,ref,toRefs } from 'vue'
   import {useRouter} from 'vue-router'
   import axios from '@/views/chen/http'
   import {parseTime} from '@/util/date'
   export default defineComponent({
       name: "meix",
       setup() {
        //    const tableData = [
        //        {
        //            date: 1,
        //            name: '张晓雅', //姓名
        //            gender:"女", //性别
        //            shen:"2930511229321",//身份证号
        //            phone:"13022568213",//联系电话
        //            ji:"四川省 成都市 龙泉驿区",//籍贯地
        //            ju:"四川省 成都市 龙泉驿区",//现居住地
        //            mijie:"次密",//密接类型
        //            source:"核实后转居家检测",//来源
        //            den:"系统",//登记人
        //            denji:"2020-11-12",//登记日期
        //            gejie:"2020-11-11 15:00",//隔离解除日期
        //            state: '监测中 ',//状态
        //        }
        //    ]; 
           let tableData=reactive({
            tableData:[
            {
            },
            ]
        })
           const router=useRouter();
           //按钮
           const handleClick=(index: any)=>{
                   if(index.name=="体温待监测"){
                       router.push({path:'/miqie',query:{key:index.address}})
                   }else if(index.name=="监测待解除"){
                       router.push({path:'/cha',query:{key:index.address}})
                   }
                //    console.log(index.id);
                   
           }
           //删除
           let que=ref(false);
           let fan=(()=>{
            que.value=false
           });
           let que1=(()=>{
            que.value=false
            axios({
            method:"post",url:"/dailyAddition/deleteContactById",
            params:{id:san2}
           }).then((res)=>{
            console.log('删除成功');
           })
           });
           let san2=ref()
           const san=(obj:any)=>{ //删除姓名的内容
            san2=obj
            que.value=true
           }
           onMounted( async()=>{
        //挂载前获取全部参数
        //展示全部数据
        await axios({
            method:"get",url:"dailyAddition/findDayAdd",
            params:{registrationDate:'2023-2-24'}
           }).then((res)=>{
            
            let a=res.data.data;
            tableData.tableData=a
            // console.log(res);
            
            
           })
            
        });
        let idd=ref()
        //模态框
        let isShow = reactive({
            showDialog: false,//模态框
        });
        async function show(obj) {
            isShow.showDialog = true; //激活模态框
            idd=obj.id
            return idd
        };
        function hidden() {
            isShow.showDialog = false; // 返回关闭模态框
        };
        function hidden2(obj){ //进行数据导入
            
                
            console.log(idd);
            axios({
            method:"post",url:"dailyAddition/alterStatus",
            params:{id:idd}
           }).then((res)=>{
            isShow.showDialog = false;
            alert("解除成功");
            axios({
            method:"get",url:"dailyAddition/findDayAdd",
            params:{registrationDate:'2023-2-24'}
           }).then((res)=>{
            
            let a=res.data.data;
            tableData.tableData=a
            // console.log(res);
            
            
           })
           })
            
        };
        
           return{
               ...toRefs(tableData),
               handleClick,
               router,
               san,
               isShow,
               show,
               hidden,
               hidden2,
               idd,
               que,
               fan,
               que1,
               san2
           }
       }
   })
   
   
   </script>
   
   <style scoped lang="less">
   .hh {
       width: 100%;
       height: 800px;
       background-color: rgb(255, 255, 255);
       
       
   }
   .quan{
       width: 100%;
       height: 700px;
       display: flex;
       flex-direction: column;
   }
   // 设置表头样式
   /deep/ .el-table th{
       background-color: #f9f9f9 !important; 
       color: rgba(0, 0, 0, 0.521);
       Font-weight:400;// 字体粗细
       
       
   }
   
   .hh1{
       margin-top:30px;
       margin-left:35px;
       margin-right:35px
   }
   .ju{
       padding: 20px 0px 20px 0px;
   }
   .mask {
    /* 创建遮罩层 */
    position: fixed;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.dialog1 {
    text-align: center;
    width: 300px;
    height: 200px;
    background: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    /* top和left这个两个50%表示的是，这个弹框的顶部到页面的顶部，弹框的左侧到页面的左侧 */
    transform: translate(-50%, -50%);

    /* 这个偏移表示的是，偏移这个div框自身宽度和高度的50% */
    span {
        display: inline;
        width: 100px;
        text-align: right;
    }
    h2{
        margin-top:20px
    }
    .dialog-btn{
        margin-top:90px
    }
}
.que{
    position: fixed;
    top:calc(50% - 200px);
    left:calc(50% - 150px);
    width: 300px;
    height: 400px;
    background-color: #f0dddd;
    z-index:2000;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h1{
        margin-bottom:30px
    }
    button{
        margin-left:20px
    }
}
  </style>